<template>
    <div class="panel-item">
        <div v-for="(item, index) in list" :key="index" @mousedown="mouseDown(item)">
            <span>{{ item.text }}</span>
        </div>
    </div>
</template>
<script setup>
import { defineEmits } from 'vue';

const emits = defineEmits(['mouseDownHandle'])

const list = [
    {
        type: 'rect',
        text: '矩形',
    },
    {
        type: 'circle',
        text: '圆形',
    },
]

const mouseDown = (shap) => {
    emits('mouseDownHandle', shap)
}
</script>

<style lang="scss" scoped>
.panel-item {
    height: 200px;
    position: absolute;
    z-index: 9999;
    width: 42px;
    box-shadow: #ccc 0px 0px 10px;
    top: 30px;
    left: 20px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    user-select: none;



}
</style>